<!-- 会员统计 -->
<template>
    <div class="page has-navbar vipStatistics">
        <scroll class="page-content">
            <div class="page-content-inner">
                <div class="HSpace1"></div>
                <div class="vipNumber clearfix">
                    <div class="numItem left">
                        <div class="name">流失会员</div>
                        <div class="num color1" v-text="aDates.lost_count" style="color:#ff9494;">0</div>
                        <div class="tip">连续15天未消费</div>
                    </div>
                    <div class="numItem left">
                        <div class="name">活跃会员</div>
                        <div class="num color2" v-text="aDates.active_count" style="color:#769aff;">0</div>
                        <div class="tip">昨日有消费</div>
                    </div>
                    <div class="numItem left">
                        <div class="name">新增会员</div>
                        <div class="num color3" v-text="aDates.new_count" style="color:#72f6c6;">0</div>
                        <div class="tip">昨日新增</div>
                    </div>
                    <div class="numItem left">
                        <div class="name">总会员数</div>
                        <div class="num color4" v-text="aDates.total" style="color:#44e2ff;">0</div>
                        <div class="tip">包含不活跃</div>
                    </div>
                </div>
                <div class="HSpace1"></div>
                <div class="pie">
                    <div class="title">昨日概况</div>
                    <div id="pie"></div>
                </div>
                <div class="HSpace1"></div>
                <div class="histogram">
                    <div class="title">近七日概况</div>
                    <div id="histogram"></div>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script type="text/javascript">
import echarts from 'echarts';
export default{
    props: ['storeId'],
	data () {
		return {
            dates:[],

            aDates:{},
            
            pie: null, // 饼状图
            histogram: null, // 柱状图
        }
	},
    methods: {
        drawPie( datas ){
            let seriesData = [
                {value:datas.lost_count, name:'流失'},
                {value:datas.new_count, name:'新增'},
                {value:datas.active_count, name:'活跃'}
            ];
            if ( this.pie ) {
                this.pie.dispose();
            }
            this.pie = echarts.init(document.getElementById('pie'));
            setTimeout(()=>{
                this.pie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    color: ["#ff9494", "#72f6c6", "#769aff"],
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        bottom:0,
                        data:['流失','新增','活跃']
                    },
                    series: [
                        {
                            name:sessionStorage.getItem('storeName'),
                            type:'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:seriesData
                        }
                    ]
                });
            },200)
        },
        //柱状图
        drawHistogram ( datas ) {
            let newCountArr =  [];//新增
            let activeCountArr =  [];//活跃
            let lostCountArr =  [];//流失
            let monthArr =  [];//每月总销售额数据数组

            let sssss=[];
            for(let i = 0,len = datas.length; i < len;i++){
                //获取每月总销售额
                newCountArr.push(datas[i].new_count);
                activeCountArr.push(datas[i].active_count);
                lostCountArr.push(datas[i].lost_count);
                monthArr.push((new Date(datas[i].biz_date).getMonth()+1)+'-'+new Date(datas[i].biz_date).getDate());
            }
            if ( this.histogram ) {
                this.histogram.dispose();
            }
            this.histogram = echarts.init(document.getElementById('histogram'));
            setTimeout(()=>{
                this.histogram.setOption({
                    tooltip: {},
                    color: ["#87a2ea"],
                    legend: {
                        data:['流失','新增','活跃'],
                        y: 'bottom',
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '15%',
                        top: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        data: monthArr,
                        axisLine: {
                            show: true, 
                            lineStyle: {
                                color: "#ddd"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#444"
                            }
                        },
                        type: 'category',
                        // boundaryGap: false,
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show:true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#ddd'
                            }
                        },
                        axisLine: {
                            show: false, 
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#444",
                                fontSize: 12
                            }
                        }
                    },
                    series: [
                        {
                            color: ["#ff9494"],
                            name: '流失',
                            type: 'bar',
                            barWidth: '20%',
                            data: lostCountArr,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [5, 5, 0, 0]
                                },
                                emphasis: {
                                    // backgroundImage: linearGradient(to bottom, #30bdff, #3068ff)
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{c}' // 这里是数据展示的时候显示的数据
                                }
                            },
                        },
                        {
                            name: '新增',
                            color: ["#72f6c6"],
                            type: 'bar',
                            barWidth: '20%',
                            data: newCountArr,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [5, 5, 0, 0]
                                },
                                emphasis: {
                                    // backgroundImage: linearGradient(to bottom, #30bdff, #3068ff)
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{c}' // 这里是数据展示的时候显示的数据
                                }
                            },
                        },
                        {
                            name:'活跃',
                            type:'line',
                            data:activeCountArr,
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{c}' // 这里是数据展示的时候显示的数据
                                }
                            },
                        },
                    ]
                });
            },200)
        },
    },
    created(){

    },
    mounted(){
        this.$http.get(this.storeId+'/daily-member-statics').then((res)=>{
            this.dates = res.data;
            for(var i = 0, len = 7-res.data.length; i < len; i++){
                let obj = {
                    active_count: 0,
                    biz_date: (new Date().getTime()-24*3600*1000*(7-i)),
                    lost_count: 0,
                    new_count: 0,
                    sleep_count: 0,
                    total: 0
                }
                this.dates.splice(i, 0, obj);
            }
            this.drawPie(this.dates[this.dates.length-1]);
            this.aDates = this.dates[this.dates.length-1];
            this.drawHistogram(this.dates);
        })
    }
}
</script>
<style lang="scss" scoped>
	@import "vipStatistics";
</style>
